{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Announcements{% endblock %}

{% block extra_css %}
<style>
    .dashboard-link {
        display: inline-block;
        cursor: pointer;
        position: relative;
        z-index: 25;
        pointer-events: auto !important;
    }
    .dashboard-link .td_btn_in {
        pointer-events: auto !important;
    }
    .header-actions {
        position: relative;
        z-index: 30;
    }
</style>
{% endblock %}

{% block content %}
<!-- Start Blog List -->
<section>
  <div class="td_height_120 td_height_lg_80"></div>
  <div class="container">
    <div class="row">
      <div class="col-12 mb-4">
        <div class="d-flex justify-content-between align-items-center">
          <h2 class="td_fs_36 td_medium">Announcements</h2>
          <div>
            <a href="{% url 'create_announcement' %}" class="td_btn td_style_1 td_radius_10 td_medium me-2">
              <span class="td_btn_in td_white_color td_accent_bg">
                <i class="fas fa-plus me-2"></i><span>Create Announcement</span>
              </span>
            </a>
            <a href="{% url 'admin_dashboard' %}" class="td_btn td_style_1 td_type_3 td_radius_30 td_medium">
              <span class="td_btn_in td_accent_color">
                <i class="fa-solid fa-arrow-left me-2"></i><span>Back to Dashboard</span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
    
    {% if announcements %}
    <div class="row td_gap_y_30">
      {% for announcement in announcements %}
      <div class="col-lg-4">
        <div class="td_post td_style_1">
          <a href="{% url 'admin_announcement_details' announcement.announcement_id %}" class="td_post_thumb d-block">
            {% if announcement.image %}
            <img src="{{ announcement.image.url }}" alt="{{ announcement.title }}">
            {% else %}
            <img src="{% static 'assets/img/Background1.png' %}" alt="">
            {% endif %}
            <i class="fa-solid fa-link"></i>
          </a>
          <div class="td_post_info">
            <div class="td_post_meta td_fs_14 td_medium td_mb_20">
              <span><img src="{% static 'assets/img/icons/calendar.svg' %}" alt="">{{ announcement.publish_date|date:"F d, Y" }}</span>
            </div>
            <h2 class="td_post_title td_fs_24 td_medium td_mb_16">
              <a href="{% url 'admin_announcement_details' announcement.announcement_id %}">{{ announcement.title }}</a>
            </h2>
            <p class="td_post_subtitle td_mb_24 td_heading_color td_opacity_7">By {{ announcement.author.username }}</p>
            <p class="td_post_subtitle td_mb_24 td_heading_color">{{ announcement.content|truncatechars:100 }}</p>
            <a href="{% url 'admin_announcement_details' announcement.announcement_id %}" class="td_btn td_style_1 td_type_3 td_radius_30 td_medium">
              <span class="td_btn_in td_accent_color">
                <span>View Details</span>
              </span>             
            </a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="row">
      <div class="col-12">
        <div class="td_post td_style_1 p-4">
          <div class="td_post_info text-center">
            <h2 class="td_post_title td_fs_24 td_medium td_mb_16">
              <i class="fa-solid fa-info-circle me-2"></i>No Announcements
            </h2>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    
    <div class="td_height_60 td_height_lg_40"></div>
  </div>
  <div class="td_height_120 td_height_lg_80"></div>
</section>
<!-- End Blog List -->
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('.delete-announcement').click(function() {
        const announcementId = $(this).data('announcement-id');
        $('#deleteForm').attr('action', `/accounts/admin/announcement/${announcementId}/delete/`);
    });
});
</script>
{% endblock %} 